<template>
	<view>
		<view  class="box flex" :class="getPower>2?'green':'red'">
			<view class="item flex" v-for="i in getPower" :class="getPower>2?'bg-green':'bg-red'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		computed:{
			getPower(){
				return Math.floor(this.power/20)
			}
		},
		data() {
			return {
				
			};
		},
		props:{
			power:'',
		}
	}
</script>

<style scoped>
	.box{
		padding-right: 1px;
		width: 27px;
		height: 14px;
		position: relative;
	}
	.green{
		border:1px solid rgb(50,205,50)
	}
	.red{
		border:1px solid rgb(216,30,6)
	}
	.green::after{
		content: '';
		width: 3px;
		height:6px;
		background: rgb(50,205,50);
		position: absolute;
		right: -3px;
		top:3px;
	}
	.red::after{
		content: '';
		width: 3px;
		height:6px;
		background: rgb(216,30,6);
		position: absolute;
		right: -3px;
		top:3px;
	}
	.item{
		width:4px;
		height: 10px;
		margin:1px 0 1px 1px;
	}
	.bg-green{
		background-color:rgb(50,205,50) ;
	}
	.bg-red{
		background-color:rgb(216,30,6) ;
	}
</style>
